<template>
  <div class="c-user-view">
    <c-row-crumb :title="tplLang('tab_device_c', ['title_fu'])"> </c-row-crumb>
    <c-row-view :title="tplLang('title_asset_e', ['title_fu'])">
      <template #opn>
        <c-row-view-opn
          :auth="true"
          :visible.sync="visibles.edit"
          @cancel="cancel"
          @save="save"
        >
        </c-row-view-opn>
      </template>
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="140px"
        :validate-on-rule-change="false"
      >
        <c-row :col="4">
          <c-col>
            <el-form-item :label="multLang('title_dg', ':')" prop="user_name">
              <c-form-edit :visible="visibles.edit">
                <template #edit>
                  <el-input
                    v-model="form.user_name"
                    :placeholder="multLang('text_d')"
                  ></el-input>
                </template>
                <span>{{ form.user_name }}</span>
              </c-form-edit>
            </el-form-item>
          </c-col>
          <c-col>
            <el-form-item :label="multLang('title_jq', ':')" prop="account">
              <c-form-edit :visible="visibles.edit">
                <template #edit>
                  <el-input
                    v-model="form.account"
                    :placeholder="multLang('text_d')"
                  ></el-input>
                </template>
                <span>{{ form.account }}</span>
              </c-form-edit>
            </el-form-item>
          </c-col>
          <c-col>
            <el-form-item :label="multLang('text_ba', ':')" prop="gender_tag">
              <c-form-edit :visible="visibles.edit">
                <template #edit>
                  <c-select
                    v-model="form.gender_tag"
                    :options="genderTagList"
                    :placeholder="tplLang('text_choose_a', ['text_ba'])"
                  ></c-select>
                </template>
                <span>{{ genderTagMap[form.gender_tag] }}</span>
              </c-form-edit>
            </el-form-item>
          </c-col>
          <c-col>
            <el-form-item
              :label="multLang('title_baaab_h', ':')"
              prop="user_code"
            >
              <c-form-edit :visible="visibles.edit">
                <template #edit>
                  <el-input
                    v-model="form.user_code"
                    :placeholder="multLang('text_d')"
                  ></el-input>
                </template>
                <span>{{ form.user_code }}</span>
              </c-form-edit>
            </el-form-item>
          </c-col>

          <c-col>
            <el-form-item :label="multLang('title_fx', ':')" prop="mobile">
              <c-form-edit :visible="visibles.edit">
                <template #edit>
                  <el-input
                    v-model="form.mobile"
                    :placeholder="multLang('text_d')"
                  ></el-input>
                </template>
                <span>{{ form.mobile }}</span>
              </c-form-edit>
            </el-form-item>
          </c-col>

          <c-col>
            <el-form-item :label="multLang('text_ay', ':')" prop="join_date">
              <c-form-edit :visible="visibles.edit">
                <template #edit>
                  <c-date-picker
                    v-model="form.join_date"
                    :placeholder="tplLang('text_choose_a', ['title_date_t'])"
                  >
                  </c-date-picker>
                </template>
                <span>{{ form.join_date }}</span>
              </c-form-edit>
            </el-form-item>
          </c-col>

          <c-col>
            <el-form-item :label="multLang('title_gw', ':')" prop="email">
              <c-form-edit :visible="visibles.edit">
                <template #edit>
                  <el-input
                    v-model="form.email"
                    :placeholder="multLang('text_d')"
                  ></el-input>
                </template>
                <span>{{ form.email }}</span>
              </c-form-edit>
            </el-form-item>
          </c-col>
          <c-col>
            <el-form-item
              :label="multLang('text_az', '(¥/h):')"
              prop="hour_fee"
            >
              <c-form-edit :visible="visibles.edit">
                <template #edit>
                  <el-input
                    v-model="form.hour_fee"
                    :placeholder="multLang('text_d')"
                  ></el-input>
                </template>
                <span>{{ form.hour_fee }}</span>
              </c-form-edit>
            </el-form-item>
          </c-col>

          <c-col>
            <el-form-item
              :label="multLang('title_ba_m', 'title_pf', ':')"
              prop="positionIds"
            >
              <c-form-edit :visible="visibles.edit">
                <template #edit>
                  <c-mult-select
                    v-model="form.positionIds"
                    :options="groupPosition.data"
                    :placeholder="tplLang('text_choose_a', ['title_pf'])"
                  >
                  </c-mult-select>
                </template>
                <span>{{ info.groupPositionName }}</span>
              </c-form-edit>
            </el-form-item>
          </c-col>
          <c-col>
            <el-form-item :label="multLang('title_mp', ':')" prop="is_use">
              <c-form-edit :visible="visibles.edit">
                <template #edit>
                  <el-radio-group v-model="form.is_use">
                    <el-radio
                      v-for="item in isEnableList"
                      :key="item.value"
                      :label="item.value"
                    >
                      {{ item.label }}
                    </el-radio>
                  </el-radio-group>
                </template>
                <span>{{ isEnableMap[form.is_use] }}</span>
              </c-form-edit>
            </el-form-item>
          </c-col>
          <c-col>
            <el-form-item
              :label="multLang('title_aau_m', ':')"
              prop="is_charge"
            >
              <c-form-edit :visible="visibles.edit">
                <template #edit>
                  <el-checkbox v-model="form.is_charge"></el-checkbox>
                </template>
                <span>{{
                  form.is_charge
                    ? multLang('title_aau_i')
                    : multLang('title_ae_u')
                }}</span>
              </c-form-edit>
            </el-form-item>
          </c-col>
          <c-col :col="11">
            <el-form-item :label="multLang('title_note_a', ':')" prop="remark">
              <c-form-edit :visible="visibles.edit" long>
                <template #edit>
                  <c-input-text v-model="form.remark"></c-input-text>
                </template>
                <span>{{ form.remark }}</span>
              </c-form-edit>
            </el-form-item>
          </c-col>
        </c-row>
      </el-form>
    </c-row-view>
  </div>
</template>
<script>
import { editUserData, getUserInfo } from '@/http/api/v1/user'
import { getPositionOption } from '@/http/api/v1/org'
import { ObjectCopy } from '@/util'
import { closeTag } from '@/util/router'
export default {
  name: 'VUserView',
  components: {},
  props: {},
  data() {
    return {
      id: '',
      groupPosition: {
        data: [],
        map: {}
      },
      visibles: {
        edit: false
      },
      form: {
        sys_user: '2',
        id: '',
        user_name: '',
        account: '',
        password: '',
        gender_tag: '',
        user_code: '',
        mobile: '',
        join_date: '',
        email: '',
        hour_fee: '',
        positionIds: [],
        is_use: '',
        is_charge: false,
        remark: ''
      },
      info: {}
    }
  },
  computed: {
    genderTagList() {
      return this.optionList('gender_tag')
    },
    genderTagMap() {
      return this.optionMap('gender_tag')
    },
    isEnableList() {
      return this.optionList('is_enable')
    },
    isEnableMap() {
      return this.optionMap('is_enable')
    },
    rules() {
      return {
        user_name: {
          required: true,
          message: this.tplLang('msg_a', ['title_dg']),
          trigger: 'blur'
        },
        account: {
          required: true,
          message: this.tplLang('msg_a', ['title_jq']),
          trigger: 'blur'
        },
        password: {
          required: true,
          message: this.tplLang('msg_a', ['title_aah_f']),
          trigger: 'blur'
        },
        gender_tag: {
          required: true,
          message: this.tplLang('msg_a', ['text_ba']),
          trigger: 'blur'
        },
        mobile: {
          required: true,
          message: this.tplLang('msg_a', ['title_fx']),
          trigger: 'blur'
        },
        positionIds: {
          required: true,
          message: this.tplLang('text_choose_a', ['title_pf']),
          trigger: 'change'
        },
        is_use: {
          required: true,
          message: this.tplLang('text_choose_a', ['title_mp']),
          trigger: 'change'
        }
      }
    }
  },
  watch: {},
  beforeCreate() {},
  created() {
    this.setOption({ key: 'gender_tag' })
    this.setOption({ key: 'is_enable' })
    getPositionOption().then(({ data, map }) => {
      this.groupPosition.data = data
      this.groupPosition.map = map
    })
  },
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {
    const {
      name,
      params: { id, edit }
    } = this.$route

    const cacheid = id || this.id
    if (cacheid) {
      this.id = cacheid
      this.query()
    } else {
      closeTag(name)
    }

    typeof edit === 'boolean' && (this.visibles.edit = edit)
  },
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    query() {
      const { id } = this
      getUserInfo({ id }).then(({ data }) => {
        ObjectCopy(this.form, data)
        this.info = ObjectCopy(data)
      })
    },
    cancel() {
      ObjectCopy(this.form, this.info)
      this.visibles.edit = false
      this.$nextTick().then(() => this.$refs.form.clearValidate())
    },
    save() {
      this.$refs.form.validate(valid => {
        if (valid) {
          editUserData({ ...this.form }).then(({ code }) => {
            if (code === 200) {
              this.query()
              this.visibles.edit = false
            }
          })
        }
      })
    }
  }
}
</script>
<style lang="scss"></style>
